Pure React

Firat Atalay

10 min read

·

Nov 29, 2023

Now just for fun I want to show you how we can write React code without any modern tooling and any build step. So, right inside a regular HTML file. So, this is what I call pure React. And it will show you why the tools that we will talk about next are so helpful. So, to start let’s create our very first project folder. So, right now we have an empty folder. So, let’s create index.HTML. And to scaffold an empty HTML structure in VS Code, we can simply write the exclamation mark, hit enter, and then we have an empty HTML structure. So, let’s give it a title, “Hello React!”. And then here in the body, all I will do for now is to create a div with the ID of “root”. And it could be any ID here of course, but root is the standard for React. And we will place nothing in here.

So, give it a save. And maybe you noticed how prettier automatically formatted the code as I saved it. Okay, so let’s now add React to this file. And the way we do that when we write pure React is by simply including the React library as a script. Now, to get the URL of those scripts, we can actually check out React’s official documentation. So, to do that, let’s head over to our browser and then check out React.dev. So, that’s the official React website, and we will explore it a little bit in a future lecture. But for now, let’s just come here to this learn part. And then right here, let’s select installation.

So, right on this page, then you will find this small part here which says, “Try React locally”. And then here, let’s click on this link here that says, “Download this HTML page”. Now if for some reason that link there doesn’t exist anymore in the future, then you can just try to write these two things here by hand because it is these two scripts that we’re now gonna add to our HTML file. Now, okay, so let’s move back to VS Code and paste them right here.

And with this, we have actually included React into this, let’s say project. Now, again, usually when we write React, we do not do this but instead we use a modern build tool such as the ones that we are going to talk about next. But for now, we’re doing it the pure way just so you see why we actually need those tools.

Now in case you’re wondering why we have two libraries here,

It’s because this first one here is basically the core React library. So, this one is the one that works with components, state, and really all the React stuff. So, this is basically the interface of how to interact with React. And then this other one here.

So, React-dom is basically the rendering layer which can render React components into the dom. And so since we want to render in the browser, we need to use React-dom. But React can actually be rendered in other environments, for example, as native applications using React Native.

But anyway, let’s now create our very first component. And of course that also needs to happen inside a script because that is also a JavaScript. And so after these two scripts here where we include the React library, let’s open up another script. And then in there we can create a function and I will call it “App”, just like this.

So, remember from the very first app that we built, that React is based on components. And a component is basically just a function that starts with an upper case like this. And so now from this function here, we can return whatever we want to see on the UI.

Now, in that first application that we built, we returned some JSX code. Remember that? However, that is not going to work here because well, we don’t have the tooling that can convert JSX back to JavaScript. And so here we need to use the create element function. So, let’s do, “return React.createElement”.

And then simply the name of the HTML element. So, let’s say we want the header. So, this React object here is the one that’s coming from this script right here. So, this script will give us this React object. And so from there we can then use this create element method.

And if all this is really confusing to you right now, then please don’t worry. So again, the goal here is to really not for you to understand React at this point. We’re just doing some experiments and just getting a first look at React here. But we are not really learning it yet. All right?

So, I’m really just trying to demonstrate here how we write pure React without a build tool.

But anyway, let’s now actually go back to that folder here and open index.HTML in Google Chrome just to see what happens. And let’s inspect. And close down this. We’ll make it just a bit bigger here for you.

And so this is just to show you that right now actually nothing happened. So, we still only have this root div and then of course our scripts.

And so the reason why that header that we created is not here yet is because we didn’t tell React to actually render it onto the page. So, basically to place that header into the dom.

And so let’s now go back and do that. And we do this here right at the very end. So after the component. So let’s create a so-called root. And so here and now we need that React-dom library that I mentioned before. So this one here.

So from React-dom, we now do “createRoot”. And now we simply need to select this div element right here. So, this div here, this element will become the root of our application which means that the application will be rendered inside of this element. So, basically right here. So, let’s simply select that with “document.getElementById” which is just normal dom manipulation, or in this case just normal selecting elements using dom methods. So, we created our root, and now we can do “root.render”. And then again “React.createElement App”. And so here is where our App component comes into play. So we render basically creating a new element out of this App component.

And once again, please don’t memorize any of this. All right? But anyway, we should see a header element here. So remember, it’s inside this root. And yeah, there it is. Now it’s empty because we didn’t actually place any content in it. But React did render this header right here. So, this header element inside our dom. And so let’s now actually add something in there. Now the way this works is a bit confusing.

So, this create element function does not only accept the name of the HTML element but also so-called props, which in this case are null. And then as a third argument, the children of this element.

And in this case, let’s just write it as a string. Let’s just do “Hello React!”, give it a save, and let’s go back. And yeah, there we go. Beautiful.

So now this “Hello React!” is basically a child note of this header note right here. But let’s go back and yeah, as I mentioned, before we used JSX to write this. And then we wouldn’t have to write this weird thing right here. We would just write it as HTML basically. But that doesn’t work here. And so that’s one more reason why we do not write pure React like this in a real development environment. But anyway, right here in this function, we can of course just write any normal JavaScript logic.

So let’s, for example, create a string of the current time. So, that’s “new Date”, and of course this has nothing to do with React, “toLocalTimeString”. And then let’s add that here into the string and we can just use a template literal for that. All right, but here, let’s just place now this time and let’s say “It’s” and then whatever the time is right now. But anyway, here now we have our time.

And as a last small thing in this application what I want to do is to now update this every second with the new time which then basically will make this function as a clock. So, let’s go back and let’s do that. And for that we need a concept of state.

So, maybe you remember from the first app that we built that state is necessary whenever we want to update something on the screen. But of course we will go really deep into what state is and how it works a bit later in the course. For now, let’s just create a new piece of state. And then we don’t need this anymore actually.

So, let’s say, “const”, and again calling it “time” and then “setTime” which is a function with which we can update that time state. So then we need to say “React.useState” and again the React object is that big object that we got here from this script. And then here we need to set the default value. And so that’s then going to be this.

Let’s place that here, give it a save, and if we update now, it will look just exactly the same, so there’s no updating yet. So, it of course simply reflects the current time now.

And okay, so let’s go back and basically have it update every second. So, for that, we need something called an effect. So, “React.useEffect” and we also did that in the first app. And now in here inside this effect we will simply use the JavaScript “setInterval” function. So, this is not a React function but it’s simply a JavaScript function that we’re going to use to set up a timer that every second will update this time state here. So, set interval also needs a function and we could use arrow functions here to make it a bit shorter, but nevermind.

So, this function should run every thousand milliseconds. So, once a second. And what should happen each time? So each time that this function here will be executed is that the time should be set. So, “setTime” and then again this because this will then always be the new current time. So, paste that here.

And now finally here, we need to define this empty array. And this will all make sense once we start learning about effects. But for now, just copy the code like this. And this should now already work.

So let’s check it out. Of course, we need to, again manually update. And yeah, beautiful.

So, we have a working clock that we coded only with React. You see down here that the dom is actually updated in this place once every second. And so that’s the work of React. Nice.

Now this of course, is all very bare bones. And yeah, as I said, this is really, really not how we use React in the real world. So, we have no modules here. We have no way of converting JSX. We have no HTTP server which automatically reloads the application and so on. But again, I still believe that it was quite useful to shortly explore this pure React in this lecture. But of course, now it’s time to move on to a more robust and real world setup.